<template>
  <div class="shelf_bookList">
    <div class="tips hide">
      书架空空的，赶紧去 <a href="">找书</a>吧
    </div>
    <div class="booklist show clearfix">
      <ul class="clearfix">
        <li  @touchstart="group_del($event,index)"  @touchend = "clearTime" v-for="(str, index) in shujiaData">
          <a  @touchstart= "clickTime" @touchend="select_del($event, booId = str.bookId, index)">
            <img :src="str.imgUrl" alt="">
            <span>{{str.bookName}}</span>
            <p class="select_del" v-bind:class="{is_del:$store.state.is_del[index]}" v-if="$store.state.del_selects"></p>
          </a>
        </li>
        <li class="add">
          <img src="../../../static/img/tianjia.png" alt="">
        </li>
      </ul>
    </div> 
  </div>
</template>

<script>
  import store from '@/store/index'
  export default {
    data () {
      return {
        msg: '13213',
        timer: '',
        touchTime: [],
        shujiaData: ''
      }
    },
    mounted: function () {
      // 初始化选中，真实情况 i<data.length替代，data带纸书架data的条数
      // 获取数据
      var that = this
      this.$http.get('./static/data/bookshujia.json').then((res) => {
        this.shujiaData = res.body.bookList
        console.log(this.shujiaData)
        this.$store.commit('init_del_icon', this.shujiaData.length)
        // 初始化书架所有书籍ID
        let shujiaBookId = []
        for (var i in this.shujiaData) {
          shujiaBookId.push(this.shujiaData[i].bookId)
        }
        this.$store.commit('init_shujia_bookId', shujiaBookId)
      })
      // 删除成功后
      this.$parent.$on('del_success', function (msg) {
        var shujiadata2 = that.shujiaData
       // var length = msg.del_data.length
        for (var i = 0; i < msg.del_data.length; i++) {
          if (msg.del_data[i] === true) {
            shujiadata2.splice(i, 1, null)
          }
        }
        that.shujiaData = []
        for (var j = 0; j < shujiadata2.length; j++) {
          if (shujiadata2[j] !== null) {
            that.shujiaData.push(shujiadata2[j])
          }
        }
        this.$store.commit('showButtomNav')
        this.$store.commit('hidedel')
        this.$store.commit('empty_del')
        this.$store.commit('init_del_icon', this.$store.state.shujiaBookId.length)
      })
    },
    store,
    methods: {
      group_del: function ($event,index) {
        var that = this
        if (!that.$store.state.del_selects) {
         // 移动端长按事件
          this.timer = setTimeout(function () {
            $event.preventDefault()
            that.$store.commit('showdel')
            that.$store.commit('showButtomNav2')
          }, 1800)
        }
      },
      clearTime: function () {
        clearTimeout(this.timer)
      },
      goXq (id) {
        this.$router.push( { name: 'bookinfo', params: { bookid: id }})
      },
      clickTime: function (id) {
        if (this.$store.state.del_selects) {
          this.touchTime.push(new Date().getTime())
          
        }
      },
      select_del: function ($event, bookId, index) {
        if (this.$store.state.del_selects) {
          this.touchTime.push(new Date().getTime())
          $event.preventDefault()
          if (this.touchTime[this.touchTime.length - 1] - this.touchTime[this.touchTime.length - 2] < 300) {
            console.log('选中书籍的Id:' + bookId)
            console.log('选中书籍的序列号:' + index)
            this.$store.commit('change_del_icon', index)
            this.$store.commit('del_info', bookId)
            this.$emit('del_bookId', bookId)
          }
        }else{
            this.goXq(index)
        }
      }
    }
  }
</script>


<style>
  .select_del{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: absolute;
    border: 1px solid #fff;
    right: 18px;
    bottom: 34px;
    background: rgba(255,255,255,.5);
  }
  .is_del{
    background:#fff url(../../../static/img/bookshelf/xuanzhong.png) no-repeat;
    background-size: cover;
    border:none;
  }
  .shelf_bookList .tips{
    padding:36px;
    color:#666;
    font-size: 12px;
    text-align: center;
    background: #fff;
  }
  .shelf_bookList .tips a{
    color: #f60;
    font-size: 12px;
  }
  .shelf_bookList .booklist{
    margin:10px;
    margin-bottom: 60px;
  }
  .shelf_bookList .booklist ul{
    width: 100%;
  }
  .shelf_bookList .booklist li{
    position: relative;
    display: inline-block;
    width: 33.3%;
    padding:10px;

  }
  .shelf_bookList .booklist li a{
    display: block;
    width: 100%;
    text-align: center;
  }
  .shelf_bookList .booklist li a img{
    width: 90%;
  }
  .shelf_bookList .booklist li a span{
    width: 90%;
    text-align: center;
    display: block;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .shelf_bookList .booklist .add{
    border: 1px solid #cdcdcd;
    background: #fbfbfb;
    position: relative;
    height: 123px;
    /* padding: 0; */
    width: 75px;
    margin: 10px 0 0 8px;

  }
  .shelf_bookList .booklist .add img{
    width: 30px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translateX(-50%) translateY(-50%);
  }

</style>
